<template>
  <div class="move-show-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="校园二手交易" left-arrow @click-left="goBack" />

    <!-- 搜索框 -->
    <div class="search-box">
      <van-search
        v-model="searchValue"
        placeholder="搜索二手商品（如：笔记本、教材、自行车）"
        @search="onSearch"
      />
    </div>

    <!-- 当前页面内容区域 -->
    <div class="page-content">
      <!-- 首页 -->
      <div v-if="currentTab === 0" class="home-page">
        <!-- 轮播图 -->
        <van-swipe class="banner" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banners" :key="index">
            <img :src="item.image" alt="轮播图" />
          </van-swipe-item>
        </van-swipe>

        <!-- 分类导航 -->
        <van-grid :column-num="4" class="category-grid">
          <van-grid-item
            v-for="(category, index) in categories"
            :key="index"
            :text="category.name"
            :icon="category.icon"
            @click="navigateToCategory(category.id)"
          />
        </van-grid>

        <!-- 推荐商品列表 -->
        <div class="recommend-shops">
          <div class="section-title">推荐闲置</div>
          <van-card
            v-for="(product, index) in recommendProducts"
            :key="index"
            :thumb="product.image"
            :title="product.title"
            :price="product.price"
            :desc="product.desc"
            :tag="product.tag"
            @click="goToProductDetail(product.id)"
          />
        </div>
      </div>

      <!-- 发现页 -->
      <div v-if="currentTab === 1" class="discover-page">
        <div class="discover-header">
          <div class="header-content">
            <h3 class="discover-title">
              <span class="campus-icon">🏫</span>
              校园二手宝藏
              <span class="treasure-icon">💎</span>
            </h3>
            <p class="discover-subtitle">学长学姐的优质闲置 · 学弟学妹的实惠选择</p>
            <div class="discover-tags">
              <van-tag round type="primary">高性价比</van-tag>
              <van-tag round type="success">毕业季特惠</van-tag>
              <van-tag round type="danger">限时抢购</van-tag>
            </div>
          </div>
          <div class="header-bg"></div>
        </div>
        
        <!-- 发现页内容：热门推荐 -->
        <div class="hot-recommend">
          <div class="section-title">
            <van-icon name="fire" color="#ee0a24" />
            热门闲置
            <van-icon name="fire" color="#ee0a24" />
          </div>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多数据了"
            @load="onLoad"
          >
            <van-card
              v-for="(item, index) in discoverList"
              :key="index"
              :thumb="item.image"
              :title="item.title"
              :desc="item.desc"
              :price="item.price"
            />
          </van-list>
        </div>
      </div>

      <!-- 购物车页 -->
      <div v-if="currentTab === 2" class="cart-page">
        <div class="cart-content">
          <van-empty v-if="cartItems.length === 0" description="购物车为空" />
          
          <div v-else class="cart-items">
            <!-- 购物车商品列表 -->
            <van-checkbox-group v-model="checkedIds">
              <van-card
                v-for="(item, index) in cartItems"
                :key="item.id"
                :thumb="item.image"
                :title="item.name"
                :price="item.price"
                :desc="item.spec"
              >
                <template #footer>
                  <div class="cart-item-footer">
                    <van-checkbox :name="item.id" />
                    <van-stepper
                      v-model="item.quantity"
                      min="1"
                      @change="updateCartItem(item.id, $event)"
                    />
                    <van-button size="mini" type="danger" @click="removeFromCart(item.id)">
                      删除
                    </van-button>
                  </div>
                </template>
              </van-card>
            </van-checkbox-group>

            <!-- 结算栏 -->
            <van-submit-bar
              :price="totalPrice"
              button-text="结算"
              @submit="checkout"
            >
              <van-checkbox v-model="selectAll" @change="toggleSelectAll">全选</van-checkbox>
              <div class="total-amount">
                合计: <span class="price">{{ totalPrice / 100 }}</span>
              </div>
            </van-submit-bar>
          </div>
        </div>
      </div>

      <!-- 我的页 -->
      <div v-if="currentTab === 3" class="my-page">
        <div class="user-info">
          <van-cell-group inset>
            <van-cell title="用户名" value="校园用户" />
            <van-cell title="手机号" value="138****1234" />
            <van-cell title="我的积分" value="1250" is-link @click="goToPoints" />
            <van-cell title="收货地址" is-link @click="goToAddress" />
          </van-cell-group>
        </div>

        <div class="my-orders">
          <div class="section-title">我的交易</div>
          <van-tabs v-model="activeTab">
            <van-tab title="全部">
              <van-list
                v-model:loading="orderLoading"
                :finished="orderFinished"
                finished-text="没有更多订单了"
                @load="loadOrders"
              >
                <van-card
                  v-for="(order, index) in orders"
                  :key="order.id"
                  :title="order.shopName"
                  :desc="order.statusText"
                  :price="order.totalPrice"
                  :thumb="order.shopLogo"
                >
                  <template #content>
                    <div class="order-items">
                      <div v-for="(item, i) in order.items" :key="i" class="order-item">
                        <van-image
                          width="50"
                          height="50"
                          :src="item.image"
                          fit="cover"
                        />
                        <div class="item-info">
                          <div class="item-name">{{ item.name }}</div>
                          <div class="item-spec">规格: {{ item.spec }}</div>
                          <div class="item-price-quantity">
                            <span class="price">¥{{ (item.price / 100).toFixed(2) }}</span>
                            <span class="quantity">x{{ item.quantity }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template #footer>
                    <div class="order-actions">
                      <van-button
                        v-if="order.status === '待付款'"
                        size="mini"
                        type="danger"
                        @click="payOrder(order.id)"
                      >
                        立即支付
                      </van-button>
                      <van-button
                        v-if="order.status === '待收货'"
                        size="mini"
                        type="primary"
                        @click="confirmReceipt(order.id)"
                      >
                        确认收货
                      </van-button>
                      <van-button
                        v-if="order.status === '已完成'"
                        size="mini"
                        plain
                        type="primary"
                        @click="viewDetail(order.id)"
                      >
                        查看详情
                      </van-button>
                      <van-button
                        v-if="order.status !== '已完成'"
                        size="mini"
                        plain
                        @click="cancelOrder(order.id)"
                      >
                        取消订单
                      </van-button>
                    </div>
                  </template>
                </van-card>
              </van-list>
            </van-tab>
            <van-tab title="待付款">
              <van-list
                v-model:loading="orderLoading"
                :finished="orderFinished"
                finished-text="没有更多订单了"
                @load="loadOrders('待付款')"
              >
                <van-card
                  v-for="(order, index) in pendingPaymentOrders"
                  :key="order.id"
                  :title="order.shopName"
                  :desc="order.statusText"
                  :price="order.totalPrice"
                  :thumb="order.shopLogo"
                >
                  <template #content>
                    <div class="order-items">
                      <div v-for="(item, i) in order.items" :key="i" class="order-item">
                        <van-image
                          width="50"
                          height="50"
                          :src="item.image"
                          fit="cover"
                        />
                        <div class="item-info">
                          <div class="item-name">{{ item.name }}</div>
                          <div class="item-spec">规格: {{ item.spec }}</div>
                          <div class="item-price-quantity">
                            <span class="price">¥{{ (item.price / 100).toFixed(2) }}</span>
                            <span class="quantity">x{{ item.quantity }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template #footer>
                    <div class="order-actions">
                      <van-button
                        size="mini"
                        type="danger"
                        @click="payOrder(order.id)"
                      >
                        立即支付
                      </van-button>
                      <van-button
                        size="mini"
                        plain
                        @click="cancelOrder(order.id)"
                      >
                        取消订单
                      </van-button>
                    </div>
                  </template>
                </van-card>
              </van-list>
            </van-tab>
            <van-tab title="待收货">
              <van-list
                v-model:loading="orderLoading"
                :finished="orderFinished"
                finished-text="没有更多订单了"
                @load="loadOrders('待收货')"
              >
                <van-card
                  v-for="(order, index) in pendingReceiptOrders"
                  :key="order.id"
                  :title="order.shopName"
                  :desc="order.statusText"
                  :price="order.totalPrice"
                  :thumb="order.shopLogo"
                >
                  <template #content>
                    <div class="order-items">
                      <div v-for="(item, i) in order.items" :key="i" class="order-item">
                        <van-image
                          width="50"
                          height="50"
                          :src="item.image"
                          fit="cover"
                        />
                        <div class="item-info">
                          <div class="item-name">{{ item.name }}</div>
                          <div class="item-spec">规格: {{ item.spec }}</div>
                          <div class="item-price-quantity">
                            <span class="price">¥{{ (item.price / 100).toFixed(2) }}</span>
                            <span class="quantity">x{{ item.quantity }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template #footer>
                    <div class="order-actions">
                      <van-button
                        size="mini"
                        type="primary"
                        @click="confirmReceipt(order.id)"
                      >
                        确认收货
                      </van-button>
                      <van-button
                        size="mini"
                        plain
                        @click="viewDetail(order.id)"
                      >
                        查看物流
                      </van-button>
                    </div>
                  </template>
                </van-card>
              </van-list>
            </van-tab>
            <van-tab title="已完成">
              <van-list
                v-model:loading="orderLoading"
                :finished="orderFinished"
                finished-text="没有更多订单了"
                @load="loadOrders('已完成')"
              >
                <van-card
                  v-for="(order, index) in completedOrders"
                  :key="order.id"
                  :title="order.shopName"
                  :desc="order.statusText"
                  :price="order.totalPrice"
                  :thumb="order.shopLogo"
                >
                  <template #content>
                    <div class="order-items">
                      <div v-for="(item, i) in order.items" :key="i" class="order-item">
                        <van-image
                          width="50"
                          height="50"
                          :src="item.image"
                          fit="cover"
                        />
                        <div class="item-info">
                          <div class="item-name">{{ item.name }}</div>
                          <div class="item-spec">规格: {{ item.spec }}</div>
                          <div class="item-price-quantity">
                            <span class="price">¥{{ (item.price / 100).toFixed(2) }}</span>
                            <span class="quantity">x{{ item.quantity }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template #footer>
                    <div class="order-actions">
                      <van-button
                        size="mini"
                        plain
                        type="primary"
                        @click="viewDetail(order.id)"
                      >
                        查看详情
                      </van-button>
                      <van-button
                        size="mini"
                        plain
                        type="success"
                        @click="buyAgain(order.id)"
                      >
                        再次购买
                      </van-button>
                    </div>
                  </template>
                </van-card>
              </van-list>
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="currentTab" active-color="#1989fa" class="campus-tabbar">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">发现</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { Toast } from 'vant';

export default {
  name: 'MoveShow',
  setup() {
    // 当前选中的标签页索引
    const currentTab = ref(0);
    
    // 搜索相关
    const searchValue = ref('');
    
    // 首页数据（二手商品）
    const banners = ref([
      { image: 'https://img14.360buyimg.com/n2/s240x240_jfs/t1/209537/1/5825/138120/616c30b8E5fcb7e35/3eb5684b37c0c044.jpg!q70.jpg', title: '毕业季教材大清仓' },
      { image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/302837/4/7426/72878/68287879F3e53319b/3b0a78e7a2c2cdc6.jpg!q70.dpg', title: '数码产品专区' },
      { image: 'https://cbu01.alicdn.com/img/ibank/O1CN01O8Y8Dr1uvOSFgL4MP_!!2211638166099-0-cib.jpg', title: '运动器材低价转让' }
    ]);
    
    const categories = ref([
      { id: 1, name: '数码电子'},
      { id: 2, name: '教材书籍'},
      { id: 3, name: '运动器材'},
      { id: 4, name: '生活日用'},
      { id: 5, name: '服装鞋帽'},
      { id: 6, name: '家具家电'},
      { id: 7, name: '其他闲置'},
      { id: 8, name: '全部分类' }
    ]);
    
    const recommendProducts = ref([
      { id: 1, name: 'MacBook Pro 13寸', image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/291100/13/15329/35163/6855601aFa217b28d/4404f6b109326d8d.png', price: 2800, desc: '2020款 8G+256G 9成新', tag: '数码' },
      { id: 2, name: '考研数学全书', image: 'https://img14.360buyimg.com/n2/s240x240_jfs/t1/209537/1/5825/138120/616c30b8E5fcb7e35/3eb5684b37c0c044.jpg!q70.jpg', price: 30, desc: '李永乐版 几乎全新', tag: '教材' },
      { id: 3, name: '山地自行车', image: 'https://ts2.tc.mm.bing.net/th/id/OIP-C.6vfx5vAsO8XAF8MyjBpWQQHaEK', price: 650, desc: '捷安特 24速 8成新', tag: '运动' },
      { id: 4, name: '投影仪', image: 'https://ts4.tc.mm.bing.net/th/id/OIP-C.XXW69Yk-jTl7MDOCLbAl8AHaKD', price: 180, desc: '坚果G9 1080P 95新', tag: '数码' },
      { id: 5, name: '羽绒服', image: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.gxS3znEZEqECSRIwLYVi2gHaHa', price: 150, desc: '北面 L码 9成新', tag: '服装' }
    ]);
    
    // 发现页数据
    const discoverList = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    
    // 购物车数据
    const cartItems = ref([
      { id: 101, name: '大学物理教材', image: 'https://abook.hep.com.cn/ICourseFiles/MaterialsLibCovers/dc144e1c7f884e28a40df16518a1068b.df6777f816a34ea7b35265a3902ef29c.cms/35a029e65abe457d924cda3e992cf69d.jpg', price: 20, spec: '第六版 9成新', quantity: 1 },
      { id: 102, name: '无线耳机', image: 'https://pic1.zhimg.com/v2-4f8862f4736bcfce7ce76582f37f3486_r.jpg', price: 80, spec: 'AirPods Pro 95新', quantity: 1 }
    ]);
    const checkedIds = ref([]);
    const selectAll = ref(false);
    
    // 我的页数据
    const activeTab = ref(0);
    const orders = ref([]);
    const pendingPaymentOrders = ref([]);
    const pendingReceiptOrders = ref([]);
    const completedOrders = ref([]);
    const orderLoading = ref(false);
    const orderFinished = ref(false);

    // 订单状态映射
    const statusMap = {
      '待付款': { text: '待付款', color: '#ff976a' },
      '待收货': { text: '待收货', color: '#1989fa' },
      '已完成': { text: '已完成', color: '#07c160' },
      '已取消': { text: '已取消', color: '#969799' }
    };

    // 生命周期钩子
    onMounted(() => {
      // 初始化加载发现页数据
      loadDiscoverData();
      // 初始化加载订单数据
      loadOrders();
    });
    
    // 方法定义
    const goBack = () => {
      // 返回上一页逻辑
      Toast('返回上一页');
    };
    
    const onSearch = () => {
      Toast(`搜索: ${searchValue.value}`);
    };
    
    const navigateToCategory = (categoryId) => {
      Toast(`导航到分类: ${categoryId}`);
    };
    
    const goToProductDetail = (productId) => {
      Toast(`进入商品详情: ${productId}`);
    };
    
    const loadDiscoverData = () => {
  // 模拟加载发现页数据
  loading.value = true;
  
  // 商品数据 - 每个商品有对应的真实图片URL
  const products = [
    {
      id: 1,
      image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/291100/13/15329/35163/6855601aFa217b28d/4404f6b109326d8d.png',
      title: 'iPhone 13 Pro 九成新转让',
      desc: '九成新iPhone 13 Pro，原价8999元，现仅售4000元。附带发票，包装齐全',
      price: 6299,
      originalPrice: 8999,
      category: '电子产品',
      condition: '九成新',
      location: '北京',
      likes: 45,
      postedTime: '3小时前'
    },
    {
      id: 2,
      image: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/319907/39/10894/153062/68560627F68482c2d/e97690a34610acf1.jpg!q70.jpg',
      title: '宜家沙发 八成新转让',
      desc: '八成新宜家KIVIK沙发，原价3999元，现仅售1999元。自提，可小刀',
      price: 1999,
      originalPrice: 3999,
      category: '家居用品',
      condition: '八成新',
      location: '上海',
      likes: 23,
      postedTime: '5小时前'
    },
    {
      id: 3,
      image: 'https://img11.360buyimg.com/n2/s370x370_jfs/t1/164544/8/45918/60755/66d66628F55b7dab5/cef3e6aafe39240f.jpg!q70.jpg',
      title: '优衣库羽绒服 全新转让',
      desc: '全新优衣库轻羽绒服，原价599元，现仅售399元。吊牌未拆，包邮',
      price: 399,
      originalPrice: 599,
      category: '服装配饰',
      condition: '全新',
      location: '广州',
      likes: 12,
      postedTime: '1小时前'
    },
    {
      id: 4,
      image: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/278328/37/21544/152220/67ff89b1Fb877d2f5/934c69fe821c6f14.jpg',
      title: 'JavaScript高级编程 七成新',
      desc: '七成新JavaScript高级编程第4版，原价128元，现仅售68元。包邮',
      price: 68,
      originalPrice: 128,
      category: '图书文具',
      condition: '七成新',
      location: '深圳',
      likes: 8,
      postedTime: '8小时前'
    },
    {
      id: 5,
      image: 'https://img10.360buyimg.com/n2/s240x240_jfs/t1/302189/2/9546/54190/68371621F8564f300/2b5abdac76a93e53.jpg',
      title: 'Switch游戏机 九五新',
      desc: '九五新Switch续航版，原价2099元，现仅售1599元。带2个游戏',
      price: 1599,
      originalPrice: 2099,
      category: '电子产品',
      condition: '九成新',
      location: '杭州',
      likes: 67,
      postedTime: '2小时前'
    },
    {
      id: 6,
      image: 'https://img14.360buyimg.com/n2/s240x240_jfs/t1/147803/23/38725/54758/66001c7fFb9a8c4cb/c9c48a6292b608c9.jpg',
      title: '无印良品香薰机 六成新',
      desc: '六成新无印良品香薰机，原价350元，现仅售150元。功能正常',
      price: 150,
      originalPrice: 350,
      category: '家居用品',
      condition: '六成新',
      location: '成都',
      likes: 5,
      postedTime: '12小时前'
    },
    {
      id: 7,
      image: '//img11.360buyimg.com/n2/s370x370_jfs/t1/276608/20/27257/86769/6809ee35F20800895/f8e832475406f252.jpg',
      title: '耐克运动鞋 八成新',
      desc: '八成新耐克Air Max运动鞋，原价899元，现仅售399元。尺码42',
      price: 399,
      originalPrice: 899,
      category: '服装配饰',
      condition: '八成新',
      location: '武汉',
      likes: 34,
      postedTime: '6小时前'
    },
    {
      id: 8,
      image: '//img10.360buyimg.com/n2/s240x240_jfs/t1/249390/40/27486/101097/6752b81bFf2b4d9e1/18b069e7d5b296c7.jpg',
      title: 'Kindle电子书 九成新',
      desc: '九成新Kindle Paperwhite，原价998元，现仅售598元。保护套赠送',
      price: 598,
      originalPrice: 998,
      category: '图书文具',
      condition: '九成新',
      location: '北京',
      likes: 28,
      postedTime: '4小时前'
    },
    
  ];

  setTimeout(() => {
    discoverList.value = products;
    loading.value = false;
    finished.value = true;
  }, 1000);
};
    
    const onLoad = () => {
      // 加载更多发现页数据
      loadDiscoverData();
    };
    
    const updateCartItem = (id, quantity) => {
      // 更新购物车商品数量
      const item = cartItems.value.find(item => item.id === id);
      if (item) {
        item.quantity = quantity;
      }
    };
    
    const removeFromCart = (id) => {
      // 从购物车移除商品
      cartItems.value = cartItems.value.filter(item => item.id !== id);
      // 更新选中状态
      checkedIds.value = checkedIds.value.filter(itemId => itemId !== id);
      Toast('已移除商品');
    };
    
    const toggleSelectAll = () => {
      // 全选/取消全选
      if (selectAll.value) {
        checkedIds.value = cartItems.value.map(item => item.id);
      } else {
        checkedIds.value = [];
      }
    };
    
    // 使用 computed 定义计算属性
    const totalPrice = computed(() => {
      return cartItems.value
        .filter(item => checkedIds.value.includes(item.id))
        .reduce((total, item) => total + item.price * item.quantity, 0);
    });
    
    const checkout = () => {
      if (checkedIds.value.length === 0) {
        Toast('请选择商品');
        return;
      }
      Toast(`结算金额: ${totalPrice.value / 100}元`);
    };
    
    const goToPoints = () => {
      Toast('进入积分页面');
    };
    
    const goToAddress = () => {
      Toast('进入地址管理页面');
    };
    
    const loadOrders = (status) => {
      orderLoading.value = true;
      setTimeout(() => {
        const mockData = [
          {
            id: 1001,
            shopName: '学长数码店',
            shopLogo: '//img12.360buyimg.com/n2/s240x240_jfs/t1/316774/7/2021/113526/682afa9bF47718aa3/245b7e36a9361973.jpg',
            status: '待付款',
            statusText: '待付款',
            totalPrice: 1580,
            items: [
              {
                id: 1,
                name: '二手iPhone 11',
                image: 'https://picsum.photos/50/50?random=102',
                spec: '64GB 黑色 9成新',
                price: 2800,
                quantity: 1
              }
            ]
          },
          {
            id: 1002,
            shopName: '教材专卖',
            shopLogo: '//img10.360buyimg.com/n2/s240x240_jfs/t1/283175/3/7977/125794/67e0bd8fF1bba8480/2122f33e15bd05d8.jpg',
            status: '待收货',
            statusText: '待收货',
            totalPrice: 20,
            items: [
              {
                id: 2,
                name: '高等数学教材',
                image: '//img10.360buyimg.com/n2/s240x240_jfs/t1/283175/3/7977/125794/67e0bd8fF1bba8480/2122f33e15bd05d8.jpg',
                spec: '同济第七版 全新',
                price: 3,
                quantity: 1
              },
              {
                id: 3,
                name: '大学英语四级真题',
                image: '//img10.360buyimg.com/n2/s240x240_jfs/t1/266207/6/23582/111196/67bc17e9F1797b7ee/a94b67b268e34446.jpg',
                spec: '2023年版 9成新',
                price: 2,
                quantity: 2
              }
            ]
          },
          {
            id: 1003,
            shopName: '运动装备',
            shopLogo: '//img12.360buyimg.com/n2/s370x370_jfs/t1/220027/37/40823/125359/6657f5caFd5d96c83/f17cd21e455edae0.jpg',
            status: '已完成',
            statusText: '已完成',
            totalPrice: 80,
            items: [
              {
                id: 4,
                name: '篮球',
                image: 'https://picsum.photos/50/50?random=107',
                spec: '斯伯丁 7号球',
                price: 12,
                quantity: 1
              },
              {
                id: 5,
                name: '运动护膝',
                image: 'https://picsum.photos/50/50?random=108',
                spec: 'LP 788CA 黑色',
                price: 10,
                quantity: 2
              }
            ]
          },
          {
            id: 1004,
            shopName: '生活用品',
            shopLogo: '//img11.360buyimg.com/n2/s240x240_jfs/t1/211697/22/46384/73709/67370965F0fdbba22/97812ab0f4d33718.jpg',
            status: '待付款',
            statusText: '待付款',
            totalPrice: 300,
            items: [
              {
                id: 6,
                name: '台灯',
                image: 'https://picsum.photos/50/50?random=110',
                spec: '小米LED台灯 白色',
                price: 20,
                quantity: 1
              }
            ]
          },
          {
            id: 1005,
            shopName: '毕业清仓',
            shopLogo: '//img12.360buyimg.com/n2/s240x240_jfs/t1/235957/9/21043/133850/667e19edF5491dfa6/45a31f47fb9f71e8.jpg',
            status: '已完成',
            statusText: '已完成',
            totalPrice: 120,
            items: [
              {
                id: 7,
                name: '床上小桌',
                image: 'https://picsum.photos/50/50?random=112',
                spec: '木质 可折叠',
                price: 30,
                quantity: 1
              },
              {
                id: 8,
                name: '收纳箱',
                image: 'https://picsum.photos/50/50?random=113',
                spec: '大号 塑料',
                price: 15,
                quantity: 2
              }
            ]
          }
        ];
        
        // 根据状态筛选
        if (!status) {
          orders.value = mockData;
          pendingPaymentOrders.value = mockData.filter(item => item.status === '待付款');
          pendingReceiptOrders.value = mockData.filter(item => item.status === '待收货');
          completedOrders.value = mockData.filter(item => item.status === '已完成');
        } else {
          orders.value = mockData.filter(item => item.status === status);
        }
        
        orderLoading.value = false;
        orderFinished.value = true;
      }, 1000);
    };

    // 订单操作相关方法
    const payOrder = (orderId) => {
      Toast(`支付订单: ${orderId}`);
    };

    const confirmReceipt = (orderId) => {
      Toast(`确认收货: ${orderId}`);
    };

    const viewDetail = (orderId) => {
      Toast(`查看订单详情: ${orderId}`);
    };

    const cancelOrder = (orderId) => {
      Toast(`取消订单: ${orderId}`);
    };

    const buyAgain = (orderId) => {
      Toast(`再次购买: ${orderId}`);
    };
    
    return {
      currentTab,
      searchValue,
      banners,
      categories,
      recommendProducts,
      discoverList,
      loading,
      finished,
      cartItems,
      checkedIds,
      selectAll,
      totalPrice,
      activeTab,
      orders,
      pendingPaymentOrders,
      pendingReceiptOrders,
      completedOrders,
      orderLoading,
      orderFinished,
      goBack,
      onSearch,
      navigateToCategory,
      goToProductDetail,
      onLoad,
      updateCartItem,
      removeFromCart,
      toggleSelectAll,
      checkout,
      goToPoints,
      goToAddress,
      loadOrders,
      payOrder,
      confirmReceipt,
      viewDetail,
      cancelOrder,
      buyAgain
    };
  }
};
</script>

<style scoped>
.move-show-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-box {
  padding: 10px;
  background-color: #f8f8f8;
}

.banner {
  height: 180px;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-grid {
  margin: 10px 0;
}

.recommend-shops {
  padding: 0 10px;
}

.section-title {
  padding: 10px 0;
  font-weight: bold;
  color: #333;
}

.campus-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.page-content {
  flex: 1;
  padding-bottom: 50px;
}

.cart-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.order-items {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

.order-item {
  margin-bottom: 5px;
}

.total-amount .price {
  color: #f44;
  font-weight: bold;
}

.discover-header {
  position: relative;
  padding: 20px 15px;
  background: linear-gradient(135deg, #1989fa, #07c160);
  color: white;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}

.header-content {
  position: relative;
  z-index: 2;
}

.discover-title {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discover-title .campus-icon,
.discover-title .treasure-icon {
  margin: 0 8px;
  font-size: 24px;
}

.discover-subtitle {
  font-size: 14px;
  opacity: 0.9;
  text-align: center;
  margin: 0 0 12px 0;
}

.discover-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" opacity="0.1"><circle cx="25" cy="25" r="15" fill="white"/><circle cx="75" cy="75" r="15" fill="white"/><circle cx="75" cy="25" r="10" fill="white"/><circle cx="25" cy="75" r="10" fill="white"/></svg>');
  background-size: 100px 100px;
  z-index: 1;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.section-title .van-icon {
  margin: 0 5px;
}

.my-orders {
  margin-top: 15px;
}

.order-items {
  margin-top: 10px;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.order-item:last-child {
  border-bottom: none;
}

.item-info {
  flex: 1;
  margin-left: 10px;
}

.item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.item-spec {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.item-price-quantity {
  display: flex;
  justify-content: space-between;
}

.item-price-quantity .price {
  color: #f44;
  font-weight: bold;
}

.item-price-quantity .quantity {
  color: #666;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.order-actions .van-button {
  margin-left: 10px;
}
</style>